<template>
  <div>
    <div style="margin-top: 20px">
      <div>
        <el-form ref="formData" :model="form" :rules="rules" label-width="120px" class="flex-form-3" size="mini" label-suffix=":"
          >
          <el-form-item label="提单号" prop="billNo">
            <el-input v-model="form.billNo" size="mini" :disabled="goodItemOpType=='edit'" placeholder="提单号" />
          </el-form-item>
          <el-form-item label="货重" prop="goodsWeight">
            <el-input v-model.number="form.goodsWeight" type="number" min="0" size="mini"
              placeholder="请输入货重"></el-input>
          </el-form-item>
          <el-form-item label="件数" prop="packNo">
            <el-input v-model.number="form.packNo" type="number" min="0" size="mini" placeholder="请输入件数"></el-input>
          </el-form-item>
          <el-form-item label="名称" prop="goodsName">
            <el-input v-model="form.goodsName" size="mini" placeholder="商品名称" />
          </el-form-item>
          <el-form-item label="货值" prop="goodsPrice">
            <el-input v-model.number="form.goodsPrice" type="number" min="0" size="mini" placeholder="请输入货值"></el-input>
          </el-form-item>
          <el-form-item label="币种" prop="currCode">
            <el-select v-model.trim="form.currCode" filterable placeholder="请选择货币类型">
              <el-option v-for="(item, index) in bt_currency" :key="index"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" plain icon="el-icon-delete" @click="resetGoodsForm()" size="small">重置</el-button>
      <el-button type="success" icon="el-icon-plus" @click="submitForm()" size="small">确认</el-button>
    </div>

    <basic-table :columns="columns" :tableData="tableDataPage" :tableDataAll="tableData" :total="tableData.length"
      :pageSize="pageParams.pageSize" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
      :emptySmall="true" :showSummary="true" :showSummaryColumns="showSummaryColumns" size="mini"
      style="margin-top: 15px;">

      <template #currCode="scope">
        <dict-value :list="bt_currency" :dictCode="scope.row.currCode"></dict-value>
      </template>

      <template #operate="scope" v-if="dialogType != 'detail'">
        <div class="option-menu">
          <el-button size="mini" type="text" @click="handleClickEdit(scope.index, scope.row)">编辑
          </el-button>
          <el-button size="mini" type="text" @click.native.prevent="handleDelete(scope.index, tableData)">删除
          </el-button>
        </div>
      </template>
    </basic-table>
  </div>
</template>

<script>
import curr_type from "@/assets/dicts/curr_type.json";
  export default {
    name: "tabGoods",
    dicts: [],
    components: {},
    props: {
      editGoodsData: {
        type: Array,
        default: () => []
      },
      dialogType: {
        type: String,
        default: "add"
      },
    },
    data() {
      var validateNumber = (rule, value, callback) => {
        if (value <= 0) {
          callback(new Error('数值必须大于0'));
        } else {
          callback();
        }
      };
      return {
        dialogVisible: false,
        //编辑索引
        editIndex: null,
        goodItemOpType:'add',
        bt_currency: curr_type.value, //货币类型字典
        form: {
          id: null,
          platSeqNo: null,
          hsCode: null,
          goodsName: null,
          wrapType: null,
          manifestId: null,
          goodsWeight: null,
          packNo: null,
          billNo: null,
          currCode: null,
          goodsPrice: null,
          customsStateCode: null
        },
        pageParams: {
          pageNum: 1,
          pageSize: 5,
        },
        tableData: [],
        columns: [
          {
            prop: "billNo",
            label: "提单号",
            align: "center"
          },
          {
            prop: "goodsWeight",
            label: "货重",
            align: "center"
          },
          {
            prop: "packNo",
            label: "件数",
            align: "center"
          },
          {
            prop: "goodsName",
            label: "名称",
            align: "center"
          },
          {
            prop: "goodsPrice",
            label: "货值",
            align: "center"
          },
          {
            prop: "currCode",
            label: "币种",
            align: "center",
            slot: true,
          },
          {
            prop: "operate",
            label: "操作",
            slot: true,
            width: 140,
            fixed: "right",
          }],

          showSummaryColumns: [ //需要进行表尾合计的列
            "goodsWeight",
            "packNo",
            "goodsPrice"
          ],
          rules: {
            goodsName: [{
              required: true,
              message: "商品名称不能为空",
              trigger: "blur"
            }],
            goodsWeight: [{
              required: true,
              message: "毛重不能为空",
              trigger: "blur"
            }],
            packNo: [{
              required: true,
              message: "货物总件数不能为空",
              trigger: "blur"
            }],
            billNo: [{
              required: true,
              message: "提运单号不能为空",
              trigger: "blur"
            }],
          }
        };
      },
      watch: {
          "editGoodsData": {
            immediate: true,
            handler(val) {
              if (val) {
                this.tableData=this.editGoodsData;
              }
            }
          }
        },
        computed: {
          tableDataPage() {
            let arr = this.tableData;
            const start = (this.pageParams.pageNum - 1) * this.pageParams.pageSize;
            const end = this.pageParams.pageNum * this.pageParams.pageSize;
            return arr.slice(start, end);
          },
        },
        methods: {

          resetGoodsForm(){
             this.$refs["formData"].resetFields();
          },

          // 分页
          handleSizeChange(val) {
            this.pageParams.pageSize = val.pageSize;
          },
          handleCurrentChange(val) {
            this.pageParams.pageNum = val.currentPage;
          },


          handleDelete(index, rows) {
            let _index = ((this.pageParams.pageNum - 1) * this.pageParams.pageSize) + index;
            this.tableData.splice(_index, 1);
            //计算删除后当前页是否需要前移
            let totalPage = Math.ceil(
              this.tableData.length / this.pageParams.pageSize
            );
            if (this.pageParams.pageNum > 1 && this.pageParams.pageNum > totalPage) {
              this.pageParams.pageNum -= 1;
            }
          },
          //点击编辑
         handleClickEdit(index, row) {
              this.goodItemOpType='edit';
              this.editIndex = index;
              this.form = JSON.parse(JSON.stringify(row));
         },
          //添加商品
          submitForm() {
            this.$refs["formData"].validate((valid) => {
              if (valid) {
                if (this.goodItemOpType == "add") {
                  let goodsItem = {
                    ...this.form
                  };
                 let exisitArr= this.tableData.filter(n=>n.billNo==goodsItem.billNo);
                  if(exisitArr.length>0){
                    this.$modal.alertError("当前提单号已存在");
                    return
                  }

                  this.tableData.push(goodsItem);
                } else {
                    this.tableData.splice(this.editIndex, 1, {
                    ...this.form
                  });
                  this.goodItemOpType='add';
                }
                 this.resetGoodsForm();
              }
            })
          },
        },
    };
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog__body {
    padding-top: 10px;
  }

  .btn {
    margin-bottom: 10px;
  }

  .dialog-footer {
    text-align: center;
  }

  .table-box {
    max-height: 451px;
    overflow-y: scroll;
  }

  ::v-deep .el-input-number--mini {
    width: 116px;
  }
</style>
